import { Meta } from '@storybook/addon-docs';

<Meta title="Foundations/Icons/Implementation" />

# Svg Icons

We recommend to use inline svg's or svg symbols to avoid http requests and to give the ability to style svg strokes and fills through css

## Inline Svg example

```html
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon icon--4xl ">
  <path xmlns="http://www.w3.org/2000/svg" d="m16.444 19.204 4.066-7.044-4.066-7.044-.65.375 3.633 6.294h-15.187v.75h15.187l-3.633 6.294z" />
</svg>
```


## Svg symbols example

Another way to load svg icons is to define `<symbol>` elements in a hidden `<svg>` in the top of the page, right after the `<body>` element. Then you can call icons with the help of `<use>` element.
[More infos about svg symbols](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)
### Setup symbols
```html
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="ArrowRight" viewBox="0 0 24 24">
    <!-- <path>s and whatever other shapes in here -->
  </symbol>

  <symbol id="ArrowLeft" viewBox="0 0 24 24">
    <!-- <path>s and whatever other shapes in here -->
  </symbol>
</svg>
```

### Insert Icon
```html
<svg class="icon icon--base">
  <use xlink:href="#ArrowRight" />
</svg>
```

## Icon sizes
Use the following classes to set the size of the icon:
- `icon--sm`
- `icon--base`
- `icon--md`
- `icon--lg`
- `icon--xl`
- `icon--2xl`
- `icon--3xl`
- `icon--4xl`
- `icon--5xl`

<Canvas>
  <div className="flex items-center">
    <svg viewBox="0 0 24 24" class="icon icon--sm">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--base">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--md">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--lg">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--xl">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--2xl">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--3xl">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--4xl">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="icon icon--5xl">
      <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
    </svg>
  </div>
</Canvas>

If you want to control the width of an icon with its parent container, use the `icon--full` class.

## Spinning Icon
Use the `icon--spin` class to spin an icon.

<Canvas>
  <svg viewBox="0 0 24 24" class="icon icon--3xl icon--spin">
    <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
  </svg>
</Canvas>

```html
  <svg viewBox="0 0 24 24" class="icon icon--3xl icon--spin">
    <path d="m12 3.7v.8c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5c0-2.1.8-3.9 2.2-5.3l-.6-.6c-1.5 1.5-2.4 3.6-2.4 5.9 0 4.6 3.7 8.3 8.3 8.3s8.3-3.7 8.3-8.3-3.7-8.3-8.3-8.3z"></path>
  </svg>
```


